<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css"></link>
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css.map"></link>
<!-- 引入jquery的js  -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"></link>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
<!-- 引入bootbox时间 的css -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
<!-- 引入bootbox时间 的js -->
<script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入bootbox上传图片 的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
<!-- 引入bootbox上传图片 的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
<!-- 引入bootbox开关 按钮 的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-switch-master/css/bootstrap3/bootstrap-switch.css"></link>
<body>

<!--
<input class="form-control" id="" name="" >
-->

<!-- 新增表单 -->
<form id="addForm">
<br>
<input type="hidden" id="movieId" name="movieId">
    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>电影名称</label></div>
            <div class="col-md-4"><input class="form-control" name="movieName" id="name"></div>
            <div class="col-md-2"><label>电影类型</label></div>
            <div class="col-md-4">
                <input type="checkbox" name="typeids" value="1">动作&nbsp;
                <input type="checkbox" name="typeids" value="2">科幻&nbsp;
                <input type="checkbox" name="typeids" value="3">动画&nbsp;
                <input type="checkbox" name="typeids" value="4">犯罪&nbsp;
                <input type="checkbox" name="typeids" value="5">冒险&nbsp;
                <input type="checkbox" name="typeids" value="6">剧情&nbsp;
                <input type="checkbox" name="typeids" value="7">纪录片&nbsp;
                <input type="checkbox" name="typeids" value="8">爱情&nbsp;
                <input type="checkbox" name="typeids" value="9">喜剧&nbsp;
                <input type="checkbox" name="typeids" value="10">伦理&nbsp;
                <input type="checkbox" name="typeids" value="11">古装&nbsp;
                <input type="checkbox" name="typeids" value="12">灾难&nbsp;
                <input type="checkbox" name="typeids" value="13">战争&nbsp;
                <input type="checkbox" name="typeids" value="14">惊悚&nbsp;
                <input type="checkbox" name="typeids" value="15">黑帮&nbsp;
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>电影国家</label></div>
            <div class="col-md-4">
                <select class="selectpicker form-control" data-live-search="true" name="moviestate" id="moviestate">
                    <option value="中国">中国</option>
                    <option value="日本">日本</option>
                    <option value="美国">美国</option>
                    <option value="英国">英国</option>
                    <option value="德国">德国</option>
                    <option value="泰国">泰国</option>
                    <option value="印度">印度</option>
                    <option value="加拿大">加拿大</option>
                    <option value="巴西">巴西</option>
                </select>
            </div>
            <div class="col-md-2"><label>电影时长</label></div>
            <div class="col-md-4"><input class="form-control" placeholder="分钟" id="moviedate" name="moviedate"></div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>上映时间</label></div>
            <div class="col-md-4">
            <input type="text" class="form-control date"  name="filmSchedule" id=filmSchedule>
            </div>
            <div class="col-md-2"><label>下映时间</label></div>
            <div class="col-md-4">
                <input type="text" class="form-control date"  name="efilmSchedule" id=efilmSchedule>
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>导演名称</label></div>
            <div class="col-md-4"><input class="form-control" id="director" name="director"></div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
        <div class="col-md-2"><label>导演图片</label></div>
        <div class="col-md-4">
            <input type="text" class="form-control" name="directorimg" id="textimg"/>
            <!-- projectfile -->
            <input type="file" multiple class="projectfile" accept="image/*" name="imgs" id="addImg">
        </div>
    </div>
    </div>




    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>演员名称</label></div>
            <div class="col-md-4">
                <input class="form-control" name="roleList[0].roleName" id="roleName">
            </div>
            <div class="col-md-2"><label>饰演角色</label></div>
            <div class="col-md-4">
                <input class="form-control" name="roleList[0].portray" id="portray">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>演员图片</label></div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="roleList[0].roleImg" id="pageimg"/>
                <input type="file" multiple class="projectfile" accept="image/*" name="imgs" id="roimg">
            </div>
            <div class="col-md-2">
                <button onclick="add()" type="button" class="btn  btn-primary glyphicon glyphicon-plus">
                    点击添加
                </button>
            </div>
        </div>
    </div>
    <div id="wp">

    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>演员名称</label></div>
            <div class="col-md-4">
                <input class="form-control" name="roleList[1].roleName">
            </div>
            <div class="col-md-2"><label>饰演角色</label></div>
            <div class="col-md-4">
                <input class="form-control" name="roleList[1].portray">
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>演员图片</label></div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="roleList[1].roleImg" id="pageimg1"/>
                <input type="file" multiple class="projectfile" accept="image/*" name="imgs" id="roimg1">
            </div>
        </div>
    </div>
</div>


    <div class="form-group">
        <div class="row">
            <div class="col-md-2"><label>影片简介</label></div>
            <div class="col-md-4">
                <textarea class="form-control" style="width: 450px;height: 200px;" id="synopsis" name="synopsis"></textarea>
        </div>
    </div>
    </div>
    <br>

    <div class="form-group">
        <div class="row">
        <div class="col-md-2"><label>上映图片</label></div>
        <div class="col-md-5">
            <input type="text" class="form-control" name="img" id="testimg"/>
            <!-- projectfile -->
            <input type="file" multiple class="projectfile" accept="image/*" name="imgs" id="userImg">
        </div>
    </div>
    </div>
<br>

    <div class="form-group">
        <div class="col-md-2"><label></label></div>
        <div class="col-md-4">
            <button onclick="addMovie()" type="button" class="btn btn-danger">提交</button>
        </div>
        <div class="col-md-6">
            <button onclick="returnPage()" type="button" class="btn btn-danger">返回</button>
        </div>
    </div>

</form>



</body>

<script>

    returnPage=function () {
        location.href="/picture";
    }

    var c=2;
    $(function(){
        dateTc();
        uploadImg();//电影图片
        directorimg();//导演图片
        actor();//演员图片
        actor2();
    })
    function dateTc() {
        $('.date').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),//初始化当前日期
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
        })
    }
    function addMovie(){
        $.ajax({
            url:"/sec/addMovie",
            type:'post',
            data:$("#addForm").serialize(),//表单序列化
            success:function(data){
           location.href="/picture";
            }
        });
    }


    //上传图片
    function uploadImg(url){
        // 注意id
        $('#userImg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/directorimg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#testimg').val(imgval);
        });
    }
    //上传导演图片
    function directorimg(url){
        // 注意id
        $('#addImg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/directorimg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#textimg').val(imgval);
        });
    }
    //上传演员图片
    function actor(url){
        // 注意id
        $('#roimg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/directorimg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#pageimg').val(imgval);
        });
    }
    //上传演员图片2
    function actor2(url){
        // 注意id
        $('#roimg1').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/directorimg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#pageimg1').val(imgval);
        });
    }
    //上传演员图片3
    function actor3(url){
        // 注意id
        var tid = "roimg"+c;
        var kid = "pageimg"+c;
        $("#"+tid+"").fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/directorimg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            debugger;
            var	imgval = data.response.path;
            $("#"+kid+"").val(imgval);
        });
    }
    //追加

    add=function () {
        var kid = "pageimg"+c;
        var tid = "roimg"+c;
        var str='<div class="form-group">'+
            ' <div class="row">'+
            ' <div class="col-md-2"><label>演员名称</label></div>'+
            '<div class="col-md-4">'+
            '<input class="form-control" name="roleList['+c+'].roleName">'+
            '</div>'+
            '<div class="col-md-2"><label>饰演角色</label></div>'+
            '<div class="col-md-4">'+
            '<input class="form-control" name="roleList['+c+'].portray">'+
            '</div>'+
            '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<div class="row">'+
            '<div class="col-md-2"><label>演员图片</label></div>'+
            '<div class="col-md-4">'+
            '<input type="text" class="form-control" name="roleList['+c+'].roleImg" id='+kid+'>'+
            '<input type="file" multiple class="projectfile" accept="image/*" name="imgs" id='+tid+'>'+
            '</div>'+
            '</div>'+
            '</div>';
        $("#wp").append(str);
        actor3();
        c++;
    }

</script>
</html>